<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html> <!-- PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="js/style.css" rel="stylesheet"/>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="js/jquery.validate.min.js"></script>
<script type="text/javascript"
	src="js/localization/messages_vi.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$("#formCompany").validate({
				errorElement: "span", 
				rules: {
					companyName: {required:true},
					address:{required:true},
					contactPerson:{required:true},
					phoneNumber:{required:true},
					contactPerson:{required:true},
					contactPerson:{required:true},
					noOfWorkers:{number:true},
					noOfLine:{number:true},
					noOfMachines:{number:true},
					noOfBranches:{number:true},
					capacityOfProduct:{number:true},
					/* max_field: { max : 10 },
					range_field: { range: [4,10] },
					rangelength_field: { rangelength: [4,10] } */
				}
			});
		});
		
		
		$(window).load(function(){
			$.ajax({
				url: "CompanyController",
				type:  "GET",
				success: function(data){
					$("#typeOfProduct").append(data);
				},
				error:function(data){
					alert("Don't reload!");
				}
			});
		});
		function changeWorkShop(){
			var inpWorkShop = document.getElementById('browseWorkshopPicture');			
			var i;
			for ( i = 0; i < inpWorkShop.files.length; ++i) {
			  var name = inpWorkShop.files.item(i).name;
			}
			 document.getElementById("sizeWorkShopImage").value = i;
		}
		function changeWareHouse(){
			var inpWareHouse = document.getElementById('browseWarehousePicture');
			var j;
			for ( j = 0; j < inpWareHouse.files.length; ++j) {
			  var name = inpWareHouse.files.item(j).name;
			}
			 document.getElementById("sizeWareHouseImage").value = j;
		}
		/* function submit(){
			document.getElementById("formCompany").submit();
		}
		
		function uploadImage(){
			$.ajax({
				url: "UploadImageController",
				type:  "Get",
				contentType: 'multipart/form-data',
				success: function(data){
					 document.getElementById("stringPath").value = data;
					alert("Goi ajax thanh cong!");
				},
				error:function(data){
					alert("Don't reload!");
				}
			});
		} */
		 
		
	</script>
	<style type="text/css">
		table {
		width: 600px;		
		}
		td{
		width: 350px;
		}
	</style>
	
	<body>
	
	
	<div id="container">
	    <h2 style="text-align:center">ADD COMPANY</h2>
    <form id="formCompany" name="formCompany" method="post" action="CompanyController" enctype="multipart/form-data">
    
    <div>
			<fieldset>
		    	<legend> General Information</legend>
		    	  <table  border="0">
		    	    <tr>
		    	      <td>Company name</td>
		    	      <td >
		    	        <label for="companyName"></label>    	        
		    	        <input type="text" name="companyName" id="companyName" />
		  	        </td>
		  	      </tr>
		    	    <tr>
		    	      <td>Address</td>
		    	      <td><label for="address"></label>
		   	          <input type="text" name="address" id="address" /></td>
		  	      </tr>
		    	    <tr>
		    	      <td>Phone number</td>
		    	      <td><label for="phoneNumber"></label>
		   	          <input type="text" name="phoneNumber" id="phoneNumber" /></td>
		  	      </tr>
		    	    <tr>
		    	      <td>Contact person</td>
		    	      <td><label for="contactPerson"></label>
		   	          <input type="text" name="contactPerson" id="contactPerson" /></td>
		  	      </tr>
		    	    <tr>
		    	      <td>Annual  financial report</td>
		    	      <td><label for="annualFinalcialReport"></label>   	          
		   	          <textarea style="height: 100px" rows="auto" cols="30" name="annualFinalcialReport" id="annualFinalcialReport"></textarea>
		   	          </td>
		  	      </tr>
		    	    <tr>
		    	      <td>Types of product</td>
		    	      <td>   	          
		   	          <Select name="typeOfProduct" id="typeOfProduct" >      	          	
		   	          </Select>
		   	          </td>
		   	          
		  	      </tr>          
		  	    </table>        
		   </fieldset>
    	</div>
        <br/>
    <div>
        <fieldset><legend>CompanySize and Capacity</legend>
	            <table border="0">
	              <tr>
	                <td >No. of workers</td>
	                <td > 
	                <input type="text" name="noOfWorkers" id="noOfWorkers" /></td>
	              </tr>
	              <tr>
	                <td>No. of lines</td>
	                <td>
	                <input type="text" name="noOfLine" id="noOfLine" /></td>
	              </tr>
	              <tr>
	                <td>No. of machines/line</td>
	                <td>
	                <input type="text" name="noOfMachines" id="noOfMachines" /></td>
	              </tr>
	              <tr>
	                <td>No. of branches</td>
	                <td>
	                <input type="text" name="noOfBranches" id="noOfBranches" /></td>
	              </tr>
	             <tr>
					<td>Capacity of products/ day/ month</td>
					<td><input type="text" name="capacityOfProduct"
						id="capacityOfProduct" /></td>
				</tr>
				<tr>
					<td>Time of textile/Materials</td>
					<td><input type="text" name="timeOfTextileMaterial"
						id="timeOfTextileMaterial" /></td>
				</tr>
				<tr>
					<td>Time of textile/Material origin</td>
					<td><input type="text" name="timeOfTextileMaterialorigin"
						id="timeOfTextileMaterialorigin" /></td>
				</tr>
				<tr>
						<td><input type="text" name="sizeWorkShopImage" id="sizeWorkShopImage" /></td> 
		    			<td><input type="text" name="sizeWareHouseImage" id="sizeWareHouseImage" /></td>   	
		   				
					</tr>	
					
	            </table>
            </fieldset>           	    
     </div>
           <br/>
     <div>
       	  <fieldset>
	    	<legend> Equipment</legend>    	
			<table id="table" border="0">
				
				<tr>
					<td>Workshop of image</td>
					<td> 
						<input type="file"  accept="jpg|png" name="browseWorkshopPicture"
						 id="browseWorkshopPicture" multiple onchange="changeWorkShop()"/>
					</td>
					<td></td>
				</tr>
				<tr>
					<td>Warehouse of image</td>
					<td> 
						<input type="file"  accept="jpg|png" name="browseWarehousePicture"
						id="browseWarehousePicture"  multiple onchange="changeWareHouse()"/>
					</td>
				</tr>
						
			</table>		
    	</fieldset>
	</div>
	
    <div><br /> <input type="submit" value="Save" name="save" id="save" /> 
    	<input	type="button" value="Reset" name="reset" id="reset" />
     </div> 
    </form>
    
     </div>
     </div>
	</body>
	
	</html>